<template>
	<view class="openWallet">
		<view class="openWallet-form">
				<u--form
					labelPosition="left"
					:model="form"
					labelWidth="100"
					>
					<u-form-item label="姓名"  borderBottom>
				    <u--input disabledColor="#fff" :disabled="true" placeholder="请输入姓名" border="none" v-model="form.real_name"></u--input>
			    </u-form-item>
				<u-form-item label="身份证号"  borderBottom>
				    <u--input disabledColor="#fff" :disabled="true"  placeholder="请输入身份证号" border="none" v-model="form.id_card"></u--input>
				</u-form-item>
				<u-form-item label="手机号"  borderBottom>
				    <u--input  disabledColor="#fff" :disabled="true" maxlength="11" placeholder="请输入手机号" border="none" v-model="form.mobiles"></u--input>
				</u-form-item>
				<u-form-item label="验证码"  borderBottom>
				  <VerifyCode
				  	:islabel="false" 
				  	 :username="form.mobile"  v-model="form.verify_code" border="none"></VerifyCode>
				</u-form-item>
				<u-form-item label="支付密码"  borderBottom>
				    <u--input type="number" password maxlength="6" placeholder="请设置六位数支付密码" border="none" v-model="form.payment_password1"></u--input>
				</u-form-item>
				<u-form-item label="确认密码"  :borderBottom="false" >
				    <u--input type="number" password maxlength="6"  placeholder="请确认支付密码" border="none" v-model="form.payment_password2"></u--input>
				</u-form-item>
				</u--form>	
		</view>
		<view @click="submitData" :class="form.verify_code.length===4?'openWallet-btns': 'openWallet-btn'">
			<text>确认开通</text>
		</view>
		<view class="openWallet-tips">
			<text>钱包由杉德支付提供电子支付服务</text>
		</view>
		<view @click="optertPopu" class="openWallet-optery">
			<text>点击确认开通即表示您同意疯传数藏</text>
			<text>《反洗钱承诺书》</text>
		</view>
		<u-popup :show="show" mode="bottom"  @close="show=false" >
		        <PayPactMoney></PayPactMoney>
			</u-popup>
	</view>
</template>

<script>
	import VerifyCode from '@/components/verifycode.vue'
	import PayPactMoney from '@/components/PayPactMoney'
	export default{
		components:{VerifyCode,PayPactMoney},
		data(){
			return{
				form:{
					id_card:'',
					real_name:'',
					mobiles:'',
					mobile:'',
					verify_code:'',
					payment_password1:'',
					payment_password2:''
				},
				show:false
			}
		},
		onShow() {
			let user = uni.getStorageSync('userInfo')
			this.form.mobiles =  user.mobile.slice(0,3) + '*****' +  user.mobile.slice(8,11)
		   this.form.mobile = user.mobile
		   this.form.real_name =user.extend_nickname
		   this.form.id_card=user.id_card

		},
		methods:{
			submitData(){
				if(this.form.verify_code.length===4){
					// if(!this.form.id_card){
					// 	uni.showToast({
					// 	    title: '请输入姓名！',
					// 		icon:'none',
				// 	// 	})
				// 	// 	return
				// 	// }
				// 	let regName =/^[\u4e00-\u9fa5]{2,4}$/;  
				// 	if(!regName.test(this.form.real_name)){  
				// 	   uni.showToast({
				// 	       title: '真实姓名填写有误！',
				// 	   	icon:'none',
				// 	   })  
				// 	     return   
				// 	 } 
				
				// 	 let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
				// 	if(reg.test(this.form.id_card)===false){
				// 		uni.showToast({
				// 		    title: '身份证输入不合法！',
				// 			icon:'none',
				// 		})
				// 		return
				// 	} 
					
					// if(this.form.mobile.length!==11){
					// 	uni.showToast({
					// 	    title: '请输入正确的手机号！',
					// 		icon:'none',
					// 	})
					// 	return
					// }
					
					if(this.form.payment_password1.length!==6){
						uni.showToast({
						    title: '请输入正确的支付密码！',
							icon:'none',
						})
						return
					}
					
					if(this.form.payment_password1 !== this.form.payment_password2){
						uni.showToast({
						    title: '俩次支付密码输入不一致！',
							icon:'none',
						})
						return
					}
					this.openedWallet()
				}
			},
			async openedWallet(){
				let data = await this.$http({
					url:this.$api.initWallet,
					method: 'POST',
					hideLoading: true,
					data: this.form
				})
				if(data.code===200){
					uni.showToast({
					    title: '钱包开通成功！',
						icon:'none',
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/wallet/myPurse'
						})
					},1500)
				}
			},
		    optertPopu(){
				this.show = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.openWallet{
		&-form{
			width: calc(100vw - 80rpx);
			margin: auto;
		}
		&-btn{
			
			width: calc(100vw - 80rpx);
			height: 88rpx;	
            background: #468EFF;
			border-radius: 4rpx;
			opacity: 0.4;
			margin: auto;
			margin-top: 40rpx;
			text-align: center;
			text{
				line-height: 88rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
		&-btns{
			width: calc(100vw - 80rpx);
			height: 88rpx;	
			background: #468EFF;
			border-radius: 4rpx;
			// opacity: 0.4;
			margin: auto;
			margin-top: 40rpx;
			text-align: center;
			text{
				line-height: 88rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
		&-tips{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #8C93AA;
			margin: 24rpx 0 0 40rpx;
		}
		&-optery{
			margin-left: 40rpx;
			text:nth-child(1){
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8C93AA;
			}
			text:nth-child(2){
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #468EFF;
			}
		}
	}
	.uni-input-placeholder{
		text-align: right;
	}
	::v-deep .uni-input-input{
		 text-align: right;
		  // direction: rtl;
	}
	::v-deep .u-input--square{
		border-bottom: none !important;
	}
	::v-deep .u-form-item__body{
		padding: 40rpx 0 !important;
	}
</style>